<template>
  <div
    class="aplayer"
    :class="{}"
    :style="floatStyleObj"
  >
    <div class="aplayer-body">
      <thumbnail
        :pic="currentMusic.pic"
        :playing="isPlaying"
        :enable-drag="isFloatMode"
        :theme="currentTheme"
        @toggleplay="toggle"
        @dragbegin="onDragBegin"
        @dragging="onDragAround"
      />
      <div class="aplayer-info" v-show="!mini"></div>
    </div>
    <div class="aplayer-info" v-show="!mini">
    </div>
    <audio ref="audio"></audio>
  </div>
</template>
<script>
import { ref, defineComponent, computed, toRefs } from 'vue'
import Thumbnail from './thumbnail.vue'
export default defineComponent({
  name: 'aplayer',
  components: { Thumbnail },
  emits: ['update:music'],
  props: {
    music: {
      type: Object,
      required: true,
      validator (song) {
        return !!song.src
      },
    },
    list: {
      type: Array,
      default () {
        return []
      },
    },
    mini: {
      type: Boolean,
      default: false,
    },
    showLrc: {
      type: Boolean,
      default: false,
    },
    mutex: {
      type: Boolean,
      default: true,
    },
    theme: {
      type: String,
      default: '#41b883',
    },

    listMaxHeight: String,
    /**
     * @since 1.4.1
     * Fold playlist initially
     */
    listFolded: {
      type: Boolean,
      default: false,
    },

    /**
     * @since 1.2.0 Float mode
     */
    float: {
      type: Boolean,
      default: false,
    },

    // Audio attributes as props
    // since 1.4.0
    // autoplay controls muted preload volume
    // autoplay is not observable

    /**
     * @since 1.4.0
     * not observable
     */
    autoplay: {
      type: Boolean,
      default: false,
    },

    /**
     * @since 1.4.0
     * whether to show native audio controls below Vue-APlayer
     * only work in development environment and not mini mode
     *
     * observable
     */
    controls: {
      type: Boolean,
      default: false,
    },

    /**
     * @since 1.4.0
     * observable, sync
     */
    muted: {
      type: Boolean,
      default: false,
    },
    /**
     * @since 1.4.0
     * observable
     */
    preload: String,

    /**
     * @since 1.4.0
     * observable, sync
     */
    volume: {
      type: Number,
      default: 0.8,
      validator (value) {
        return value >= 0 && value <= 1
      },
    },

    // play order control
    // since 1.5.0

    /**
     * @since 1.5.0
     * @see https://support.apple.com/en-us/HT207230
     * twoWay
     */
    shuffle: {
      type: Boolean,
      default: false,
    },
    /**
     * @since 1.5.0
     * @see https://support.apple.com/en-us/HT207230
     * twoWay
     */
    repeat: {
      type: String,
      default: REPEAT.NO_REPEAT,
    },
  },
  setup (props, { emit }) {
    const { selfAdaptingTheme, music, theme, float, autoplay, list } = toRefs(props)

    const isPlaying = ref(false)
    const isSeeking = ref(false)
    const wasPlayingBeforeSeeking = ref(false)
    const isMobile = /mobile/i.test(window.navigator.userAgent)
    const audio = ref()
    const currentTheme = computed(() => selfAdaptingTheme.value || music.theme || theme.value)
    const isFloatMode = computed(() => float.value || isMobile.value)
    const shouldAutoplay = computed(() => {
      if (!isMobile.value) return
      return autoplay.value
    })
    const musicList = computed(() => list.value)
    return {
      audio,
      isPlaying,
      isSeeking,
      wasPlayingBeforeSeeking,
      currentTheme,
      isFloatMode,
      shouldAutoplay,
      musicList,
    }
  }
})
</script>
